/*
 * @Description: tab部分的头部
 * @Author: Zzt
 * @Date: 2022-08-25 10:55:13
 * @LastEditTime: 2022-09-29 19:41:30
 */
import { Select, Badge, Tabs, Empty } from 'antd';
import classNames from 'classnames/bind';
import PorListTitle from './styles/PorListTitle.module.scss';
import { ReactNode, useEffect, useState } from 'react';
import SearchProList from './components/SearchProList';
import { useSearchResultContext } from './contexts/SearchResultContext';

const cx = classNames.bind(PorListTitle);

const { TabPane } = Tabs;
const { Option } = Select;

const TabHeadMain = (props: any) => {
  const { listQueryData } = useSearchResultContext();
  console.log('listQueryData', listQueryData);
  const { results, type } = props;

  const [choiceTab, setChoiceTab] = useState<any>(results[0]);

  useEffect(() => {
    setChoiceTab(results[0]);
  }, [results]);

  useEffect(() => {
    if (listQueryData.length === 0) return;
    setChoiceTab((state: any) => {
      console.log('state', listQueryData);
      const archiveTypeLevelList = state.archiveTypeLevelList.map((item: any) =>
        item.level.archiveTypeId === listQueryData[0].archiveTypeLevelList[0].level.archiveTypeId &&
        item.level.level === listQueryData[0].archiveTypeLevelList[0].level.level
          ? { ...item, data: listQueryData[0].archiveTypeLevelList[0].data }
          : item
      );
      return { ...state, archiveTypeLevelList };
    });
  }, [listQueryData]);

  const handleChange = (value: any) => {
    const chioce = results.find((item: any) => item.fonds.id === value);
    setChoiceTab(chioce);
  };

  const renderTab = (item: any): ReactNode => {
    const str = item.level.fullName.split('-').splice(1).join('-');
    return (
      <Badge count={item.data.totalCount} size="small" offset={[12, -4]}>
        <span dangerouslySetInnerHTML={{ __html: str }} />
      </Badge>
    );
  };
  /* 只取档案类型 */
  const renderTabType = (item: any): ReactNode => {
    const str = item.level.fullName.split('-').splice(1).join('-');
    const strr = str.split('-').splice(0, 1).join('-') + '-全文级';
    console.log('str str', strr);

    return (
      <Badge count={item.data.totalCount} size="small" offset={[12, -4]}>
        <span dangerouslySetInnerHTML={{ __html: strr }} />
      </Badge>
    );
  };

  const operations = (
    <div className={cx('select')}>
      <Select defaultValue={results[0].fonds.fondName} onChange={handleChange}>
        {results.map((item: any) => (
          <Option value={item.fonds.id} key={item}>
            {item.fonds.fondName}
          </Option>
        ))}
      </Select>
    </div>
  );
  console.log('choiceTab.archiveTypeLevelList', choiceTab.archiveTypeLevelList);

  const levelList = choiceTab.archiveTypeLevelList;

  function sortId(aLevel: any, bLevel: any) {
    return aLevel.level.level - bLevel.level.level;
  }
  levelList.sort(sortId);
  return choiceTab.archiveTypeLevelList.length === 0 ? (
    <div className={cx('tab')}>
      <Tabs tabBarExtraContent={{ left: operations }} style={{ height: 220 }}>
        <div style={{ width: '100%' }}>
          <Empty />
        </div>
      </Tabs>
    </div>
  ) : (
    <div className={cx('tab')}>
      <Tabs tabBarExtraContent={{ left: operations }} style={{ height: 220 }}>
        {/* {type === 2 ? (
          <TabPane
            tab={renderTabType(choiceTab.archiveTypeLevelList[0])}
            key={choiceTab.archiveTypeLevelList[0].level}
          >
            <SearchProList info={choiceTab.archiveTypeLevelList[0]} type={11} />
          </TabPane>
        ) : (
          ''
        )} */}

        {levelList.map((item: any) =>
          item.level.level === 0 ? (
            <TabPane tab={renderTabType(item)} key={item.level.fullName}>
              <SearchProList info={item} type={11} />
            </TabPane>
          ) : (
            <TabPane tab={renderTab(item)} key={item.level.fullName}>
              <SearchProList info={item} type={type} />
            </TabPane>
          )
        )}
      </Tabs>
    </div>
  );
};
export default TabHeadMain;
